<!--关联固件-->
<template>
  <el-dialog
    title="关联固件"
    :visible.sync="associatedDialogVisible"
    width="940px"
    :before-close="handleClose"
    :close-on-click-modal="false">
    <el-form ref="form" :model="form" :inline="true">
      <el-col :span="24">
        <el-form-item label="固件名称">
          <el-input
            v-model="form.name"
            placeholder="请输入固件名称"
            clearable />
        </el-form-item>
        <el-form-item label="固件Key">
          <el-input
            v-model="form.componentInfoId"
            placeholder="请输入固件Key"
            clearable />
        </el-form-item>
        <el-form-item label="固件类型">
          <el-select v-model="form.componentType" clearable>
            <el-option
              v-for="item in firmwareTypeOptions"
              :key="item.type"
              :label="item.name"
              :value="item.type" />
          </el-select>
        </el-form-item>
        <el-button type="primary" size="14" @click="queryAssociatedFirmwareList">查询</el-button>
      </el-col>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F5F6F7' }" size="medium">
      <el-table-column prop="name" label="固件名称"> </el-table-column>
      <el-table-column prop="id" label="固件Key"> </el-table-column>
      <el-table-column prop="componentTypeName" label="固件类型"></el-table-column>
      <el-table-column prop="customNumber" label="自定义编号"> </el-table-column>
      <el-table-column prop="description" label="备注说明"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="operate" @click="jumpDetails(scope.row)">详情</el-button>
          <el-button
            type="text"
            size="operate"
            @click="handleChoice(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </el-dialog>
</template>
<script>
import { getComponentList, firmwareType, bindComponent } from "@/api/product/firmware"
export default {
  name: "associatedFirmware",
  props: {
    getFirmwareList: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      associatedDialogVisible: false, // 弹窗是否显示
      form: {
        name: "", // 固件名称
        componentInfoId: "", // 固件Key
        componentType: "", // 固件类型
        productId: this.$route.query.productId
      },
      tableData: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      firmwareTypeOptions: [] // 固件类型下拉选项
    }
  },
  created() {
    this.queryAssociatedFirmwareList()
    this.getFirmwareType()
  },
  methods: {
    // 关联固件列表
    queryAssociatedFirmwareList() {
      this.loading = true
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        ...this.form
      }
      getComponentList(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取固件类型
    getFirmwareType() {
      firmwareType().then(res => {
        this.firmwareTypeOptions = res.data.data
      }).catch(err => {
        this.$message.error(err || '请求异常')
      })
    },
    // 选择
    handleChoice(row) {
      const params = {
        productId: this.form.productId,
        componentId: row.id
      }
      bindComponent(params).then(res => {
        this.getFirmwareList()
        this.$message.success('关联成功')
        this.associatedDialogVisible = false
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 跳转详情
    jumpDetails(row) {
      this.$router.push({
        path: "/product/product-details/firmware/firmwareDetails/firmwareDetails",
        query: {
          componentInfoId: row.id,
          version: row.version,
          rowsData: JSON.stringify(row)
        }
      })
    },
    // 新建固件弹窗关闭
    handleClose() {
      this.associatedDialogVisible = false
      this.$refs.form.resetFields()
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryList()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

